import React, { useEffect, useState } from "react";
import ContentTop from '../../../components/ContentTop'
import { Form, Input, Button,message } from 'antd';
import { editPwd } from "../../../api/account";


export default function AccountModify() {
    const [form] = Form.useForm();
    const layout = {
        labelCol: {
            span: 2,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 2,
        },
    };
    const [userId, setuserId] = useState({});
    useEffect(() => {
        let { id } = JSON.parse(localStorage.getItem("user"));
        setuserId(id);
    }, []);
    
    const onFinish = async (values) => {
        const { oldPwd, newPwd } = values;
        const data = {
            newPwd:newPwd,
            id: userId,
            oldPwd: oldPwd,
        };
        let res = await editPwd(data);
        console.log(res);
        if(res.data.code == 0){
            message.success(res.data.msg);
             form.resetFields();
        }else{
            message.error(res.data.msg)
            form.resetFields();
        }
    };



    return (
        <>
            <div className="app-content">
                <ContentTop>
                    <div className="title">
                        修改密码
                    </div>
                </ContentTop>


                <div className="content-info">
                    <Form
                        {...layout}
                        form={form}
                        name="control-hooks"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="oldPwd"
                            label="原密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入原密码',
                                },
                            ]}
                        >
                            <Input.Password style={{
                                width: '100%',
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="newPassword"
                            label="新密码"
                            dependencies={['password']}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入新密码',
                                },
                            ]}
                        >
                            <Input.Password style={{
                                width: '100%',
                                height: 40,
                            }} />

                        </Form.Item>
                        <Form.Item
                            name="newPwd"
                            label="确认新密码"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('newPassword') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次密码不一致'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password style={{
                                width: '100%',
                                height: 40,
                            }} />

                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit" style={{ width: 100, height: 40 }}>
                                立即修改
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </>
    )
}
